<script setup lang='ts'>
import { ref } from 'vue'
import WorkAttendanceTable from './ui/WorkAttendanceTable.vue'
// 定义变量
const time = ref([ '','' ])

// refs
const workAttendanceTableRef = ref()

// 定义函数
// 改变时间
const changeTime = (value:any) => {
  workAttendanceTableRef.value.searchForm.ELoginTime = time.value[0]
  workAttendanceTableRef.value.searchForm.SLogoutTime = time.value[1]
}
// 查询
const serachTableData = () => {
  console.log('查询------->', time)
  workAttendanceTableRef.value.getWorkAttendanceData()
}

// 导出
const reportTableData = () => {
  console.log('导出------->')
}
</script>

<template>
  <div class="work-attendance-main-box">
    <div class="filter-criteria">
      <div class="date-picker-box">
        <el-date-picker
          v-model="time"
          :clearable="false"
          start-placeholder="最小登陆时间"
          end-placeholder="最大登陆时间"
          type="datetimerange"
          format="YYYY-MM-DD HH时"
          value-format="YYYY-MM-DD HH:00:00"
          sizi="small"
          @change="changeTime"
        />
      </div>
      <div
        class="search-btn custom-button"
        @click="serachTableData"
      >
        查询
      </div>
      <div
        class="export-btn custom-button"
        @click="reportTableData"
      >
        导出
      </div>
    </div>
    <div class="table-box">
      <WorkAttendanceTable ref="workAttendanceTableRef" />
    </div>
  </div>
</template>

<style scoped lang=scss>
.work-attendance-main-box {
  width: 100%;
  height: 100%;
  padding-top: 10px;
  background-color: #fff;

  .filter-criteria {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 30px;
    padding-left: 15px;

    /* border: 1px solid red; */

    .date-picker-box {
      width: 500px;
      height: 100%;
    }

    .search-btn,
    .export-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 100%;
      margin-left: 15px;
    }
  }

  .table-box {
    width: 100%;
    height: 100%;
    margin-top: 15px;
    padding: 0 15px;

    /* border: 1px solid red; */
  }
}
</style>
<style lang="scss">
/* .production-statistics-tabs {
  border: 1px solid red;
} */
</style>